page{
    background: #F4F4F4;
}
.cBox{
    display: flex;
    flex-direction: column;
    margin:0 30rpx;
    // .cardBox{
    //     margin: 30rpx 0 0 0;
    //     padding:0 30rpx 0 40rpx;
    //     display: flex;
    //     flex-direction: column;
    //     border: 1rpx solid #F3F3F3;
    //     border-radius: 20rpx;
    //     // box-shadow:0rpx 4rpx 10rpx 4rpx hsl(0, 0%, 90%);
    //     position: relative;
    //     // filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
    //     background: #fff;
    //     &:active{
    //         opacity: 0.7;
    //     }

    //     .top{
    //         display: flex;
    //         justify-content: space-between;
    //         align-items: center;
    //         padding: 40rpx 0;
    //         .money{
    //             display: flex;
    //             align-items: center;
    //             font-size:60rpx;
    //             font-weight: bold;
    //             padding-right: 30rpx;
    //             text{
    //                 font-size: 42rpx;
    //                 font-weight: 400;
    //             }
    //         }
    //         .content{
    //             display: flex;
    //             flex-direction: column;
    //             flex: 1;
    //             font-weight: 500;
    //         }
    //         .btn{
    //             padding: 10rpx 0rpx;
    //             font-size: 28rpx;
    //             font-weight: 500;
    //             border-radius: 30rpx;
    //             width: 140rpx;
    //             justify-content: center;
    //             display: flex;
    //             background: #F1F1F6;
    //             color: var(--orange);
    //         }
    //     }
    //     .lines{
    //         border-bottom: 4rpx dashed hsl(0, 0%, 90%);
    //         flex: 1;
    //         height: 2rpx;
    //         // margin: 0 20rpx;
    //     }
    //     .bottom{
    //         color: var(--gray);
    //         padding: 24rpx 20rpx;
    //     }
    //     .yuan{
    //         width: 40rpx;
    //         height: 40rpx;
    //         position: absolute;
    //         bottom: 70rpx;
    //         border-radius: 50%;
    //         background: #F4F4F4;
    //     }
    //     .y-left{
    //         left: -20rpx;
    //     }
    //     .y-right{
    //         right: -20rpx;
    //     }
    // }
    .cardBox-orange{
        background:radial-gradient(circle at 0 130rpx, transparent 10px, var(--orange) 0) top left/50% 100% no-repeat,
        radial-gradient(circle at 340rpx 130rpx, transparent 10px,var(--orange) 0 ) top right/50% 100% no-repeat;
        color: var(--white);
    }
    .cardBox-white{
        background:radial-gradient(circle at 0 130rpx, transparent 10px, var(--white) 0) top left/50% 100% no-repeat,
        radial-gradient(circle at 340rpx 130rpx, transparent 10px,var(--white) 0 ) top right/50% 100% no-repeat;
        color: var(--black);
    }
    .cardBox-grey{
        background:radial-gradient(circle at 0 130rpx, transparent 10px, var(--grey) 0) top left/50% 100% no-repeat,
        radial-gradient(circle at 340rpx 130rpx, transparent 10px,var(--grey) 0 ) top right/50% 100% no-repeat;
        color: var(--white);
        opacity: 0.8;
    }
    .cardBox-gray{
        background:radial-gradient(circle at 0 130rpx, transparent 10px, var(--gray) 0) top left/50% 100% no-repeat,
        radial-gradient(circle at 340rpx 130rpx, transparent 10px,var(--gray) 0 ) top right/50% 100% no-repeat;
        color: var(--white);
        opacity: 0.8;
    }
    .cardBox{
        margin: 30rpx 0 0 0;
        padding:0 40rpx 0 40rpx;
        display: flex;
        flex-direction: column;

        border-radius: 20rpx;
        position: relative;
        &:active{
            opacity: 0.7;
        }

        .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30rpx 0;
            .money{
                display: flex;
                align-items: center;
                font-size:50rpx;
                font-weight: bold;
                padding-right: 30rpx;
                text{
                    font-size: 42rpx;
                    font-weight: 400;
                }
            }
            .contentBox{
                display: flex;
                flex-direction: column;
                flex: 1;
                font-weight: 500;
            }
            .btn{
                padding: 10rpx 0rpx;
                margin-left: 20rpx;
                font-size: 24rpx;
                font-weight: 500;
                border-radius: 30rpx;
                width: 120rpx;
                justify-content: center;
                display: flex;
              
            }
            .btn-orange{
                background: #F1F1F6;
                color: var(--orange);
            }
        }
        .lines{
            border-bottom: 4rpx dashed hsl(0, 0%, 90%);
            flex: 1;
            height: 2rpx;
            // margin: 0 20rpx;
        }
        .bottom{
            // color: var(--gray);
            letter-spacing: 2rpx;
            padding: 20rpx 20rpx;
            display: flex;
            align-content: center;
            justify-content: space-between;
        }
    }
}
